<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>07.左侧固定、右侧自适应布局</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                border: 0;
                list-style: none;
            }
            .clearfix:before,
            .clearfix:after {
                display: table;
                content: '';
            }
            .clearfix:after {
                clear: both;
            }
            .clearfix {
                *zoom: 1;
            }
            .fl {
                float: left;
            }
            .fr {
                float: right;
            }
            .wrap .left {
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .wrap .right {
                height: 300px;
                background-color: yellow;
                /** 当然这种方式也是没问题的 */
                /* margin: 0 0 0 200px; */
                /**
                 * 1.我利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。
                 * BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响，它可以通过
                 * 以下任何一种方式来创建：
                 * 1).float的值不为none
                 * 2).position的值不为static或者relative
                 * 3).display的值为 table-cell, table-caption, inline-block, flex, 或者
                 *  inline-flex中的其中一个
                 * 4).overflow的值不为visible
                 * ***************----------------------*****************
                 * 2.关于BFC，在w3c里是这样描述的：在BFC中，每个盒子的左外边框紧挨着包含块的
                 * 左边框(从右到左的格式化时，则为右边框紧挨)。即使在浮动里也是这样的(尽管一个
                 * 包含块的边框会因为浮动而萎缩)，除非这个包含块的内部创建了一个新的BFC。这样，
                 * 当我们给右侧的元素单独创建一个BFC时，它将不会紧贴在包含块的左边框，而是紧贴
                 * 在左元素的右边框。
                 */
                overflow: hidden;
            }
            .xiaoyou {
                width: 600px;
                height: 150px;
                background-color: pink;
                font: bold 36px/150px "Microsoft YaHei";
                color: #fff;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="wrap clearfix">
            <div class="left fl"></div>
            <div class="right">
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
                我是自适应的
            </div>
        </div>
        <div class="xiaoyou">小小游</div>
    </body>
</html>
